<template>
   <!-- 面包屑  -->
   <el-breadcrumb separator="/">
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    <el-breadcrumb-item>参数列表</el-breadcrumb-item>
   </el-breadcrumb>

   <div class="content">
    <!-- 添加分类按钮 -->
    <el-row :gutter="20" class="addCategory">
      <el-button type="primary" size="large" @click="showDialog(true, 'add')">添加分类</el-button>
    </el-row>

    <!-- 表格 -->
    <Tables :tableDate="tableJQ" @showDialog="showDialog" @setCatNameID="setCatNameID" @init="init" :pageNow="pageNow" :pageSize="pageSize"/>

    <!-- 分页 -->
    <el-config-provider :locale="zhCn" >
      <el-pagination class="userPagination" v-model:current-page="pageNow" v-model:page-size="pageSize" :page-sizes="[2, 5, 10]"
        layout="sizes,jumper,total,next,pager,prev" :total="total" @size-change="sizeChange" @current-change="currentChange"
      />
    </el-config-provider>

    <!-- 添加分类 和 修改分类共同盒子  -->
     <AddEditCategory @init="init" :catID="catID" :catName='catName' :pageNow="pageNow" :pageSize="pageSize" :typeFlag="typeFlag" :addEditCategoryDialog="addEditCategoryDialog" @showDialog="showDialog"/>
   </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { GetListFnc } from '@/api/category'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import Tables from './components/Table/IndexView.vue'
import AddEditCategory from './components/AddEdit/IndexView.vue'

const tableDate = ref([]) // 表格数据
const total = ref(0) // 表格总数
const pageNow = ref(1) // 当前页
const pageSize = ref(2) // 每页条数
const addEditCategoryDialog = ref(false) // 添加用户盒子
const typeFlag = ref('') // add 或者 edit
const catName = ref('') // 分类名称
const catID = ref(0) // 分类ID

// 表格数据初始化 公用方法
const init = async (pageNow: number, pageSize: number) => {
  const res = await GetListFnc({
    type: 3,
    pageNum: pageNow,
    pageSize: pageSize
  })

  if (res.data.meta.status === 200) {
    tableDate.value = res.data.data
    total.value = res.data.data.length
  }
}

onMounted(() => {
  init(pageNow.value, pageSize.value)
})

const tableJQ = computed(() => {
  return tableDate.value.slice((pageNow.value - 1) * pageSize.value, pageNow.value * pageSize.value)
})

// 更改每页条数
const sizeChange = (value: number) => {
  init(pageNow.value, value)
}

// 切换页码
const currentChange = (value: number) => {
  init(value, pageSize.value)
}

// 编辑分类显示与隐藏 给子组件使用
const showDialog = (flag: boolean, type: string) => {
  addEditCategoryDialog.value = flag
  typeFlag.value = type
}

// 点击修改按钮 获得 分类名称 和 分类ID 给子组件使用
const setCatNameID = ( catname: string, id: number) => {
  catName.value = catname
  catID.value = id  
}

</script>

<style lang="scss" scoped>
.content{
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .addCategory{
    margin: 0 0 20px 0px !important;
  }
  .userPagination{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
  }
}
</style>